<template>
  <div class="main-div">
    <Row>
      <Col span="24">
        <Card dis-hover class="task-card">
          <div class="app-container">
            <Form :model="addForm" :label-width="80" :rules="ruleValidate" ref="addForm">
              <FormItem label="名称" prop="name">
                <Input v-model="addForm.name"  class="input_w" ></Input>
              </FormItem>
              <FormItem label="图标" prop="iconClass">
                <icon-picker    v-model="addForm.iconClass"  class="input_w" ></icon-picker>
              </FormItem>

              <FormItem label="流程" prop="modelName">
                <Input v-model="addForm.modelName"   class="input_w"  style="width: 180px" disabled></Input>
                <Button type="primary"   @click="selectProcess">选择</Button>
              </FormItem>

              <FormItem label="权限" prop="authority">
                <Input v-model="addForm.authorityStr"   class="input_w"  style="width: 180px" disabled></Input>
                <Button type="primary"   @click="selectAuthority">选择</Button>
              </FormItem>
              <FormItem label="描述" prop="description">
                <Input  v-model="addForm.description"  class="input_w"  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
              </FormItem>
              <FormItem>


                <Button type="primary" @click="handleSubmitForm('addForm')">确定</Button>
                <Button @click="handleResetForm('addForm')">取消</Button>
              </FormItem>
            </Form>


          </div>
        </Card>
        <Modal
          :mask-closable="false"
          title="选择流程"
          v-model="addModel"
          :transfer="false"
          width="80%">
          <div>
            <el-form :inline="true" :model="queryForm"  label-width="68px">
              <el-form-item label="名称" label-width="48px">
                <el-input v-model="queryForm.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
            <Row>

              <Col span="22" class="no-padding border-bottom border-right boder-margin">
                <Table  highlight-row ref="selection" height="450"
                       :columns="tableColumns" :data="tableData" style="padding-left: 10px;padding-top: 10px"></Table>
                <Page ref="pages" :total="total" show-elevator @on-change="changePanel" style="margin-top: 3px"/>
                <!--          @on-change="changePanelUser"-->
              </Col>
            </Row>

          </div>
          <div slot="footer">
            <el-button type="primary"     @click="handleSubmit('addForm')"  :loading="loading">确定</el-button>
            <el-button  @click="handleReset('addForm')" >取消</el-button>

          </div>

        </Modal>
      </Col>

      <el-dialog title="选择成员" :visible.sync="copyerVisible" width="600px" append-to-body class="promoter_person">
        <div class="person_body clear">
          <div class="person_tree l" style=" float: left;">
            <input type="text" v-model="copyerSearchName" @input="getDebounceData($event,activeName)">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="用户" name="1"></el-tab-pane>
              <el-tab-pane label="角色列表" name="2"></el-tab-pane>
            </el-tabs>
            <ul style="height: 360px;" v-if="activeName==1">
              <li v-for="(item,index) in users" :key="index+'c'" class="check_box">
                <a :class="toggleClass(copyerUsersList,item,'id')&&'active'"
                   @click="toChecked(copyerUsersList,item,'id')" :title="item.fullname">
                  <img src="@/assets/images/icon_role.png">{{item.fullname}}</a>
              </li>
            </ul>
            <ul style="height: 360px;" v-if="activeName==2">
              <li v-for="(item,index) in roles" :key="index+'c'" class="check_box">
                <a :class="toggleClass(copyerRoleList,item,'id')&&'active'" @click="toChecked(copyerRoleList,item,'id')"
                   :title="item.name">
                  <img src="@/assets/images/icon_role.png">{{item.name}}</a>
              </li>
            </ul>
          </div>
          <div class="has_selected l" style=" float: left;">
            <p class="clear">已选（{{copyerUsersList.length+copyerRoleList.length}}）
              <a @click="copyerUsersList=[];copyerRoleList=[]">清空</a>
            </p>
            <ul>
              <li v-for="(item,index) in copyerRoleList" :key="index+'e'">
                <img style="width: 14px;
    vertical-align: middle;
    margin-right: 5px;" src="@/assets/images/icon_role.png">
                <span>{{item.name}}</span>
                <img style="width: 14px;
    vertical-align: middle;
    margin-right: 5px;" src="@/assets/images/cancel.png" @click="removeEle(copyerRoleList,item,'id')">
              </li>

              <li v-for="(item,index) in copyerUsersList" :key="index+'e1'">
                <img style="width: 14px;
    vertical-align: middle;
    margin-right: 5px;" src="@/assets/images/icon_people.png">
                <span>{{item.fullname}}</span>
                <img style="width: 14px;
    vertical-align: middle;
    margin-right: 5px;" src="@/assets/images/cancel.png" @click="removeEle(copyerUsersList,item)">
              </li>
            </ul>
          </div>

        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="copyerVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureCopyer">确 定</el-button>

        </div>
      </el-dialog>


    </Row>


  </div>

</template>

<script>
  import {loadWfModule,loadProcess,saveLoadProcess,getWfModuleById} from "@/api/bpmOftenFlow";
  import {getAllRole, getUser} from "@/api/uc";

  export default {
    name: 'Task',
    components: {
    },

    data() {

      return {
        copyerUsersList: [],
        copyerRoleList: [],
        users: [],
        roles: [],
        activeName: '1',
        copyerSearchName: '',
        conditionRoleSearchName: "",
        copyerVisible:false,
        loading:false,
        ruleValidate: {
          name: [
            { required: true, message: '名称必须填写', trigger: 'blur' }
          ],
          iconClass: [
            { required: true, message: '图标必须填写', trigger: 'blur' }
          ],
          modelName: [
            { required: true, message: '流程必须填写', trigger: 'change' }
          ],

        },
        addModel:false,
        currentRow:{},
        addForm: {
          name: "",
          id: "",
          type: '1',
          parent: 1,
          groupName: '常用流程',
          cate_tree: '',
          nodeInfoType: 'MENU',
          iconClass: '',
          modelName: '',
          modelKey: '',
          description: '',
          authorityStr: '',
          authority: {},

        },
        tableData: [],
        tableColumns: [
          {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.defId;
              let flag = false;
              if (this.currentRow.defId === id) {
                flag = true
              } else {
                flag = false
              }

              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      this.currentRow = params.row;
                    }
                  }
                })
              ])
            }
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '别名',
            key: 'modelKey'
          },
          {
            title: '描述',
            key: 'description'
          },
        ],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        delMsgModal: false,
        delMsgModalId: "",
        chartData: {},
        sellerId: 0,
        shopName: [],
        messageTemplate: {},
        queryForm: {
          page: 1,
          limit: 10,
          pageSize: 10,
          name:"",
          status:1,
          type:2
        },
        queryRoleForm: {
          page: 1,
          limit: 1000,
          pageSize: 1000,
          name: "",
        },
        queryUserForm: {
          page: 1,
          length: 10000,
          pageSize: 10000,
          name: "",
          fullname: "",
          mobile: "",
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
     // this.getData()
      var query= this.$route.query;
      this.addForm.id=query.id;
      if (query.id){
        //初始化数据
        this.getWfModuleById(query.id)
      }
    },
    methods: {
      handleClick() {
        this.copyerSearchName = "";
        this.conditionRoleSearchName = "";
        if (this.activeName == 1) {
          this.getUser();
        } else {
          this.getAllRole();
        }
      },
      sureCopyer() {
     //   this.copyerConfig.nodeUserList = [];
        var html='';
        this.copyerRoleList.map(item => {
          html+=item.name+",";
        });
        this.copyerUsersList.map(item => {
          html+=item.fullname+",";
        });
        var authority={}
        authority['copyerRoleList']=this.copyerRoleList
        authority['copyerUsersList']=this.copyerUsersList
        authority['dispalyName']=html
        this.addForm.authorityStr=html
        if (authority){
          this.addForm.authority=        JSON.stringify(authority)
        }


        this.copyerVisible = false;
      },
      removeStrEle(item, key) {
        let a = item.zdy1 ? item.zdy1.split(",") : []
        var includesIndex;
        a.map((item, index) => {
          if (item == key) {
            includesIndex = index
          }
        });
        a.splice(includesIndex, 1);
        item.zdy1 = a.toString()
      },
      toggleClass(arr, elem, key = 'id') {
        return arr.some(item => {
          return item[key] == elem[key]
        });
      },
      toChecked(arr, elem, key = 'id') {
        var isIncludes = this.toggleClass(arr, elem, key);
        !isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key);
      },
      removeEle(arr, elem, key = 'id') {
        var includesIndex;
        arr.map((item, index) => {
          if (item[key] == elem[key]) {
            includesIndex = index
          }
        });
        arr.splice(includesIndex, 1);
      },
      getAllRole: function () {
        getAllRole(this.queryRoleForm).then((response) => {
          this.roles = response.data;
        })
      },
      getUser: function () {
        getUser(this.queryUserForm).then((response) => {
          this.users = response.page.aaData;
        })
      },
      selectAuthority(){
        this.getAllRole();
        this.getUser();
        this.copyerVisible=true
      },

      getWfModuleById:function(id){
        getWfModuleById(id).then((response) => {
         if (response.code==0){
          var data= response.data;
           this.addForm.name=data.name;
           this.addForm.parent=data.parent;
           this.addForm.groupName=data.groupName;
           this.addForm.iconClass=data.iconClass;
           this.addForm.modelName=data.modelName;
           this.addForm.modelKey=data.modelKey;
           this.addForm.description=data.description;
           if (data.authority){
             const obj = JSON.parse(data.authority)
             if (obj.copyerRoleList){
               this.copyerRoleList=obj.copyerRoleList
             }
             if (obj.copyerUsersList){
               this.copyerUsersList=obj.copyerUsersList
             }
             if (obj.dispalyName){
               this.addForm.authorityStr=obj.dispalyName
             }

           }
         }
        })
      },
      changePanel:function(page){
        this.queryForm.page = page;
        this.getData()
      },
      handleSubmitForm:function(){
        try {
          this.$refs['addForm'].validate((valid) => {
            if (valid){
              this.loading=true
              saveLoadProcess(this.addForm).then((response) => {
                if (response.code == 0) {
                  this.handleResetForm()

                }else{
                  this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

                }
                this.loading=false

              })
            }
          })

        }finally {
          this.loading=false

        }


      },
      handleResetForm:function(){
        this.$store.dispatch('tagsView/delView', this.$route)
        this.go()
      },
      go: function () {
        this.$router.go(-1)
      },
      handleSubmit () {
        if(this.currentRow){
        this.addForm.modelName= this.currentRow.name
        this.addForm.modelKey= this.currentRow.modelKey
        }
        this.addModel=false
      },
      handleReset () {
        this.addModel=false
      },
      selectProcess: function () {
        this.getData()
       this.addModel=true

      },
      addBpmOftenFlow: function () {
        this.$router.push({name: 'addBpmOftenFlow', query: {t: new Date().getTime(), modelKey: item.modelKey}})
      },
      queryMethod: function () {
        var name = this.queryForm.name;
        var tmpCreateTime = this.queryForm.tmpCreateTime;
        if (tmpCreateTime) {
          if (tmpCreateTime[0]) {
            this.queryForm.createTime = tmpCreateTime[0] + " - " + tmpCreateTime[1];
          }
        }
      },

      getData: function () {
        loadProcess(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {

      this.getData()
      },
      reset() {
        this.queryForm.name = "";
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
  .main-div {
    background-color: #f3f3f3!important;
  }
  .task-card {
    margin-top: 10px;
  }
  .input_w {
    width: 30% !important;
  }


</style>
<style>
  .a_ .el-drawer.rtl {
    overflow-y: scroll;
  }
</style>
<style scoped>
  .person_tree img {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
  }

  .has_selected img {
    width: 14px !important;
    height: 14px !important;
  }

  .error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
  }

  .add-node-popover-body {
    display: flex;
  }

  .promoter_content {
    padding: 0 20px;
  }

  .condition_content .el-button,
  .copyer_content .el-button,
  .approver_self_select .el-button,
  .promoter_content .el-button,
  .approver_content .el-button {
    margin-bottom: 20px;
  }

  .promoter_content p {
    padding: 18px 0;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
  }

  .promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
  }

  .person_body {
    border: 1px solid #f5f5f5;
    height: 500px;
  }

  .person_tree {
    padding: 10px 12px 0 8px;
    width: 280px;
    height: 100%;
    border-right: 1px solid #f5f5f5;
  }

  .person_tree input {
    padding-left: 22px;
    width: 210px;
    height: 30px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #d5dadf;
    background: url(~@/assets/images/list_search.png) no-repeat 10px center;
    background-size: 14px 14px;
    margin-bottom: 14px;
  }

  .tree_nav span {
    display: inline-block;
    padding-right: 10px;
    margin-right: 5px;
    max-width: 6em;
    color: #38adff;
    font-size: 12px;
    cursor: pointer;
    background: url(~@/assets/images/jiaojiao.png) no-repeat right center;
  }

  .tree_nav span:last-of-type {
    background: none;
  }

  .person_tree ul,
  .has_selected ul {
    height: 420px;
    overflow-y: auto;
  }

  .person_tree li {
    padding: 5px 0;
  }

  .person_tree li i {
    float: right;
    padding-left: 24px;
    padding-right: 10px;
    color: #3195f8;
    font-size: 12px;
    cursor: pointer;
    background: url(~@/assets/images/next_level_active.png) no-repeat 10px center;
    border-left: 1px solid rgb(238, 238, 238);
  }

  .person_tree li a.active + i {
    color: rgb(197, 197, 197);
    background-image: url(~@/assets/images/next_level.png);
    pointer-events: none;
  }

  .person_tree img {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .has_selected {
    width: 276px;
    height: 100%;
    font-size: 12px;
  }

  .has_selected ul {
    height: 460px;
  }

  .has_selected p {
    padding-left: 19px;
    padding-right: 20px;
    line-height: 37px;
    border-bottom: 1px solid #f2f2f2;
  }

  .has_selected p a {
    float: right;
  }

  .has_selected ul li {
    margin: 11px 26px 13px 19px;
    line-height: 17px;
  }

  .has_selected li span {
    vertical-align: middle;
  }

  .has_selected li img:first-of-type {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .has_selected li img:last-of-type {
    float: right;
    margin-top: 2px;
    width: 14px;
  }

  el-radio-group {
    padding: 20px 0;
  }

  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

  .approver_content .el-radio,
  .approver_some .el-radio,
  .approver_self_select .el-radio {
    width: 27%;
    margin-bottom: 20px;
  }

  .copyer_content .el-checkbox {
    margin-bottom: 20px;
  }

  .el-checkbox__label {
    font-size: 12px;
  }

  .condition_content,
  .copyer_content,
  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 0;
  }

  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_manager p {
    line-height: 32px;
  }

  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }

  .approver_self {
    padding: 28px 20px;
  }

  .selected_list {
    margin-bottom: 20px;
    line-height: 30px;
  }

  .selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
  }

  .selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
  }

  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }

  .condition_copyer .el-drawer__body .priority_level {
    position: absolute;
    top: 11px;
    right: 30px;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .condition_content p.tip {
    margin: 20px 0;
    width: 510px;
    text-indent: 17px;
    line-height: 45px;
    background: rgba(241, 249, 255, 1);
    border: 1px solid rgba(64, 163, 247, 1);
    color: #46a6fe;
    font-size: 14px;
  }

  .condition_content ul {
    max-height: 500px;
    overflow-y: scroll;
    margin-bottom: 20px;
  }

  .condition_content li > span {
    float: left;
    margin-right: 8px;
    width: 70px;
    line-height: 32px;
    text-align: right;
  }

  .condition_content li > div {
    display: inline-block;
    width: 370px;
  }

  .condition_content li:not(:last-child) > div > p {
    margin-bottom: 20px;
  }

  .condition_content li > div > p:not(:last-child) {
    margin-bottom: 10px;
  }

  .condition_content li > a {
    float: right;
    margin-right: 10px;
    margin-top: 7px;
  }

  .condition_content li select,
  .condition_content li input {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .condition_content li select + input {
    width: 260px;
  }

  .condition_content li select {
    margin-right: 10px;
    width: 100px;
  }

  .condition_content li p.selected_list {
    padding-left: 10px;
    border-radius: 4px;
    min-height: 32px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .condition_content li p.check_box {
    line-height: 32px;
  }

  .condition_list .el-dialog__body {
    padding: 16px 26px;
  }

  .condition_list p {
    color: #666666;
    margin-bottom: 10px;
  }

  .condition_list p.check_box {
    margin-bottom: 0;
    line-height: 36px;
  }

  .demo-drawer-footer {
    width: 30%;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }

  .el-drawer__header > :first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
    color: #171e31;
  }
</style>
